<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件通信</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="app">
  <!-- 1.1 默认插槽 -->
  <el-test>来电</el-test>
  <hr>
  <!-- 2.1 具名插槽 -->
  <el-test>
    <!-- <p v-slot:test>我命由我不由天</p>
     -->
    <template v-slot:test>
      <p>我命由我不由天</p>
    </template>
  </el-test>
  <!-- 3.1 作用域插槽 -->
  <el-test>
    <!--<template v-slot:yy="scope">  -->
    <!-- v-slot可以使用#替代 -->
    <template #yy="scope">
      <p>xxxxxx{{scope.row}}</p>
    </template>
  </el-test>
</div>
<script>
   // 在vue2.6以后的版本 我的插槽统一具名和作用域插槽 使用指令替代 v-slot指令
   // 新版的写法在组件内定义插槽的不变 只是使用的时候变为通过v-slot使用
   // 具名插槽写法 v-slot:插槽名
   // 作用域插槽写法 v-slot:插槽名="作用域插槽的值"
   // 省略的 v-bind: ==> ：
   // v-slot: ==> #
  // 1 默认插槽
  // 2 具名插槽
  // 3. 作用域插槽 1. 需要使用默认插槽或具名插槽提供坑位 2. 提供数据
  Vue.component('el-test', {
    data () {
      return {
        user: {name: 'zs', age: 18 }
      }
    },
    template: `<div>
      <h2>我是el-test组件</h2>
      <slot></slot>
      ---
      <slot name="test"></slot>
      ~~~
      <slot name="yy" :row="{user: 'zs'}"></slot>
    </div>`
  })
  var vm = new Vue({
    el: '#app'
  })
</script>
</body>
</html>
